
<template>
  <div v-if="customData.visible" class="orderDetails">
    <el-dialog
      id="dialogBox"
      title="订单详情"
      width="50%"
      top="2vh"
      :visible.sync="customData.visible"
      @close="hide"
    >
      <div class="plate-box">
        <div class="plate-title"><span />基本信息</div>
        <el-descriptions title="" direction="vertical" :column="4" border>
          <el-descriptions-item
            label="订单编号"
          >{{ detailsData.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="用户账号">{{ detailsData.userId }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">
            <span v-if="detailsData.payStatus === 0">未支付</span>
            <span v-if="detailsData.payStatus === 1">已支付</span>
          </el-descriptions-item>
          <el-descriptions-item label="自动确认订单完成时间">777777</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="plate-box">
        <div class="plate-title"><span />提货人信息</div>
        <el-descriptions title="" direction="vertical" :column="4" border>
          <el-descriptions-item label="提货人">{{ detailsData.recvUserRealName }}</el-descriptions-item>
          <el-descriptions-item
            label="手机号码"
          >{{ detailsData.recvUserPhone }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="plate-box">
        <div class="plate-title"><span />商品信息</div>
        <el-table
          :data="customData.tableData"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          style="width: 100%; border: 1px solid #f3f3f3"
          :summary-method="getSummaries"
          show-summary
          max-height="300"
        >
          <el-table-column prop="displayUrl" label="商品图片" width="100px">
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.displayUrl != undefined &&
                    scope.row.displayUrl != null &&
                    scope.row.displayUrl != ''
                "
                class="display-img"
              >
                <img
                  :src="scope.row.displayUrl"
                  alt=""
                  style="max-width: 100%; max-height: 100%"
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="itemName" label="商品名称" />
          <el-table-column label="价格/货号">
            <template slot-scope="scope">
              <div>{{ "价格: ￥" + scope.row.itemPriceDouble }}</div>
              <div>{{ "货号:" + scope.row.skuCode }}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="itemPrice" label="属性" /> -->
          <el-table-column prop="itemCount" label="数量" />
          <el-table-column prop="totalPriceDouble" label="小计" />
        </el-table>
      </div>
      <!-- <div class="plate-box">
        <div class="plate-title"><span />操作信息</div>
        <el-descriptions title="" direction="vertical" :column="4" border>
          <el-descriptions-item label="操作者">{{ detailsData.orderNo }}</el-descriptions-item>
          <el-descriptions-item
            label="操作时间"
          >{{ detailsData.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <span>{{ orderStatusFn(detailsData) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="付款状态">
            <span v-if="detailsData.payStatus === 0">未支付</span>
            <span v-if="detailsData.payStatus === 1">已支付</span>
          </el-descriptions-item>
        </el-descriptions>
      </div> -->
    </el-dialog>
  </div>
</template>
<script>
import _validate from '@/framework/commonJs/wptx_validate'
import _api from '@/framework/API/order'
import _orderStatus from '../orderStatus'
export default {
  filters: {},
  data() {
    return {
      customData: {
        visible: false,
        tableData: [
          // {
          //   displayUrl: '',
          //   skuCode: '苹果',
          //   itemName: '1234',
          //   itemPrice: '',
          //   itemStock: '3',
          //   upcCode: '24'
          // },
          // {
          //   displayUrl: '',
          //   skuCode: '苹果',
          //   itemName: '1234',
          //   itemPrice: '',
          //   itemStock: '3',
          //   upcCode: '24'
          // },
          // {
          //   displayUrl: '',
          //   skuCode: '苹果',
          //   itemName: '1234',
          //   itemPrice: '',
          //   itemStock: '3',
          //   upcCode: '24'
          // }
        ],
        detailsData: {}
      },
      orderId: '', // 订单主键id
      incomePriceDouble: '' // 商品价格合计
    }
  },
  computed: {},
  created() {},
  mounted() {

  },
  beforeDestroy() {},
  methods: {
    show(data) {
      const self = this
      self.customData.visible = true
      self.detailsData = data
      self.orderId = data.id
      console.log('1111', data.id)
      this.orderDetailsProduct()
    },
    hide() {
      const self = this
      self.customData.visible = false
    },
    headerCellStyle(row, column, rowIndex, columnIndex) {
      return { background: '#f5f7fa', borderBottom: '1px solid #EBEEF5' }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return { borderBottom: '1px solid #EBEEF5' }
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        console.log('合计', data)
        // sums[columns.length - 1] = '￥12334元'
        sums[columns.length - 1] = '￥' + this.incomePriceDouble + '元'
        // const values = data.map(item => Number(item[column.property]));
        // if (!values.every(value => isNaN(value))) {
        //   sums[index] = values.reduce((prev, curr) => {
        //     const value = Number(curr);
        //     if (!isNaN(value)) {
        //       return prev + curr;
        //     } else {
        //       return prev;
        //     }
        //   }, 0);
        //   sums[index] += ' 元';
        // } else {
        //   sums[index] = 'N/A';
        // }
      })

      return sums
    },
    onInfo(data) {
      const self = this
      self.$router.push({
        path: '/item/itemDetail',
        query: {
          itemId: data.itemId,
          itemVersionId: data.versionId,
          productType: data.productType
        }
      })
    },
    // 商品信息查询
    orderDetailsProduct(data) {
      const self = this
      console.log(self.orderId)
      const params = {
        id: self.orderId
      }
      _api.orderInfoDetailData(self, params, self.callBack_productDesc,)
    },
    callBack_productDesc(data) {
      console.log('这是查询详情接口')
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '获取超时，请稍后重试', 'warning')
      } else {
        self.customData.tableData = data.data.orderItemInfoEntitieList
        self.incomePriceDouble = data.data.incomePriceDouble
      }
    },
    // 订单状态转化
    orderStatusFn(row) {
      const orderStatusText = _orderStatus.orderStatusTextFn(row)
      return orderStatusText
    }
  }
}
</script>
<style scoped>
.plate-box {
  margin-bottom: 10px;
}
.plate-title {
  margin-bottom: 10px;
}
.plate-title span {
  display: inline-block;
  width: 5px;
  height: 18px;
  background: rgb(33, 52, 160);
  margin-right: 10px;
  vertical-align: bottom;
}
::v-deep.orderDetails .el-table__footer-wrapper tbody td {
  border-bottom: none  !important;
  color: red !important;
}
</style>
